<template>
  <div v-if="$root.resultObj">
    <give-up></give-up>
    <div class="item" v-if="$root.resultObj.searchTypeName && $root.resultObj.searchTypeName == '淘口令链接'">
      <my-title :title="$root.resultObj.searchTypeName"></my-title>
      <div class="key-words content">
        <input type="text" :disabled="$root.resultObj.searchTypeValue.length < 15"
               v-model="$root.resultObj.searchTypeValue" placeholder="关键词或淘口令地址">
        <span
          v-if="$root.resultObj.searchTypeValue.length >= 15"
          v-clipboard:copy="$root.resultObj.searchTypeValue" v-clipboard:success="onCopy"
          v-clipboard:error="onError">复制</span>
      </div>
    </div>
    <div class="item" v-if="$root.resultObj.searchTypeName && $root.resultObj.searchTypeName == '关键词搜索'">
      <my-title :title="$root.resultObj.searchTypeName+'（选择以下任意关键词搜索）'"></my-title>
      <div class="key-words content" v-for="item in $root.searchTypeValue">
        <input type="text" :disabled="item.length < 15"
               v-model="item" placeholder="关键词搜索"><span
        v-if="item.length >= 15"
        v-clipboard:copy="item" v-clipboard:success="onCopy"
        v-clipboard:error="onError">复制</span>
      </div>
      <div style="text-align: center;width: 100%;margin-top: 15px;margin-bottom: 15px">
        <p style="color: red;font-weight: bolder;font-size: 17px">注意：非关键词进店下单，不返款</p>
      </div>
    </div>
    <div class="item" v-if="$root.resultObj.searchTypeName && $root.resultObj.searchTypeName == '二维码进店'">
      <my-title :title="$root.resultObj.searchTypeName"></my-title>
      <div style="text-align: center">
        <img :src="$root.resultObj.searchTypeValue" style="height: 100px;">
      </div>
    </div>
    <div class="item"
         v-if="$root.resultObj.sortTypeName || $root.resultObj.otherCondition">
      <my-title title="筛选商品"></my-title>
      <div class="shaixuan content">
        <div v-if="$root.resultObj.sortTypeName">
          <span class="lable">排序方式：</span>
          <span class="txt" @click="setBg">{{ $root.resultObj.sortTypeName }}</span>
        </div>
        <!-- <div v-if="$root.resultObj.sendAddress">
            <span class="lable">发货地：</span>
            <span class="txt" @click="setBg">{{ $root.resultObj.sendAddress }}</span>
        </div> -->
        <div v-if="$root.priceBetween.length > 0 && $root.priceBetween[1] != '*' && $root.priceBetween[1] != 'NaN'">
          <span class="lable">价格区间：</span>
          <span class="txt" @click="setBg">{{ $root.priceBetween[0]+'-'+$root.priceBetween[1]}}</span>
        </div>
        <div v-if="$root.resultObj.otherCondition">
          <span class="lable">请勾选以下折扣和服务：</span>
        </div>
        <div v-if="$root.resultObj.otherCondition">
          <span class="txt-bg" v-for="(item, index) in $root.otherCondition" :key="index"
                @click="setBg">{{ item }}</span>
        </div>
      </div>
    </div>

    <div class="item">
      <my-title title="商品图片"></my-title>
      <div style="text-align: center">
        <img :src="$root.resultObj.productImgUrlsPrivate" style="height: 150px;">
      </div>
    </div>
    <!-- 随机货比-->
    <div class="item" v-if="$root.resultObj && $root.resultObj.personalNum">
      <my-title title="逛店铺货比"></my-title>
      <div class="goods content" ref="personalNumUrl">
        <p>请在其他店铺中，浏览{{ $root.resultObj.personalNum }}个同类型商品，并复制商品的淘口令地址！</p>
        <div v-for="(item, index) in $root.personalNumUrlArray" :key="index">
          <input type="text" placeholder="店铺链接地址" v-model="$root.personalNumUrlArray[index]">
        </div>
      </div>
    </div>
    <div class="item" v-if="$root.resultObj.storeName && $root.resultObj.searchTypeName == '关键词搜索'">
      <my-title title="店铺名称"></my-title>
      <div style="text-align: center">
        <div class="detail content" v-html="$root.storeNameString" ref="detail"></div>
      </div>
    </div>
    <my-btn @next="next"></my-btn>
  </div>
</template>

<script>
  import MyTitle from 'components/my-title.vue'
  import GiveUp from 'components/give-up.vue'
  import {Toast, MessageBox} from 'mint-ui'
  import MyBtn from 'components/my-btn.vue'

  export default {
    data() {
      return {}
    },
    components: {
      MyTitle,
      GiveUp,
      MyBtn
    },
    created() {
    },
    methods: {
      next() {
        if (this.$root.resultObj.searchTypeName && this.$root.resultObj.searchTypeName != '二维码进店' && !this.$root.resultObj.searchTypeValue) {
          Toast({
            message: `请将${this.$root.resultObj.searchTypeName}填写完整`,
            duration: 2000
          })
          return
        }
        //检查店铺名称
        let newStoreName = "";
        if (this.$root.resultObj.storeName && this.$root.resultObj.searchTypeName == '关键词搜索') {
          const inputArr = this.$refs.detail.getElementsByTagName('input')
          for (var i = 0; i < inputArr.length; i++) {
            if (!inputArr[i].value) {
              Toast({
                message: '请将店铺信息填写完整',
                duration: 2000
              })
              return
            }
            newStoreName = this.$root.resultObj.storeName.replace('*', inputArr[i].value);
          }
          //判断店铺名称是否正确
          //  console.log("newStoreName="+newStoreName+",this.$root.resultObj.storeNameStr="+this.$root.resultObj.storeNameStr);
          if (newStoreName != this.$root.resultObj.storeNameStr) {
            Toast({
              message: '您填写的店铺信息不正确',
              duration: 2000
            })
            return
          }
        }
        //将店铺名称赋值给对象
        this.$root.resultObj.storeName = newStoreName;
        // console.log("this.$root.resultObj.storeName="+this.$root.resultObj.storeName);
        //逛店铺货比
        if (this.$root.resultObj.personalNum) {
          const inputArr = this.$refs.personalNumUrl.getElementsByTagName('input')
          let arr = []
          for (var i = 0; i < inputArr.length; i++) {
            if (!inputArr[i].value) {
              Toast({
                message: '请将逛店货比信息填写完整',
                duration: 2000
              })
              return
            }
            if (inputArr[i].value.length < 15) {
              Toast({
                message: '填写的货比地址不正确',
                duration: 2000
              })
              return
            }
            arr.push(inputArr[i].value)
          }
          this.$root.resultObj.personalNumUrl = arr.join('|')
        }

        this.$router.push({
          name: 'page2'
        })
      },
      onCopy(e) {
        Toast({
          message: '复制成功',
          duration: 2000
        });
      },
      onError() {
        MessageBox('提示', '复制失败，请手动复制')
      },
      setBg(event) {
        event.target.classList.add('active')
      }
    }
  }
</script>

<style lang="scss" scoped>
  .key-words {
    text-align: center;

    input {
      border: 1px dashed #ccc;
      font-size: 1.6rem;
      width: 25rem;
      height: 4rem;
      vertical-align: top;
      padding: 0 1rem;
      margin: 0.5rem 0;
    }

    span {
      font-size: 1.4rem;
      border: 1px dashed #ccc;
      border-left: none;
      width: 4rem;
      display: inline-block;
      height: 4rem;
      line-height: 4rem;
      color: #da5360;
      margin: 0.5rem 0;
    }
  }

  .shaixuan {
    & > div {
      margin-top: 1rem;

      &:first-child {
        margin-top: 0;
      }

      span {
        display: inline-block;
        font-size: 1.4rem;
        box-sizing: border-box;

        &.txt {
          border: 1px solid gray;
          padding: 0.3rem 1.5rem;
          border-radius: 0.5rem;
          margin-right: 0.2rem;
        }

        &.txt-bg {
          padding: 0.3rem 1.5rem;
          background-color: #ccc;
          border-radius: 0.5rem;
          margin-right: 0.2rem;
        }

        &.active {
          background-color: green;
          color: #fff;
          border: none;
        }
      }
    }
  }

  .goods {
    p {
      font-size: 1.4rem;
      margin-bottom: 1rem;
      color: #ccc;
    }

    & > div {
      padding: 0.5rem 0.3rem;
      border: 1px dashed #8fdd6f;

      input {
        width: 100%;
        border: 1px solid #ccc;
        font-size: 1.4rem;
        padding: 1rem;
        border-radius: 1rem;

        &::-webkit-input-placeholder { /* WebKit, Blink, Edge */
          color: #ccc;
        }

        &:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
          color: #ccc;
        }

        &::-moz-placeholder { /* Mozilla Firefox 19+ */
          color: #ccc;
        }

        &:-ms-input-placeholder { /* Internet Explorer 10-11 */
          color: #ccc;
        }
      }
    }
  }

  .taokouling {
    p {
      margin-bottom: 1rem;
      color: #ccc;
    }

    input {
      width: 100%;
      border: 1px solid #ccc;
      font-size: 1.2rem;
      padding: 0.5rem;
      border-radius: 0.3rem;

      &::-webkit-input-placeholder { /* WebKit, Blink, Edge */
        color: #ccc;
      }

      &:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
        color: #ccc;
      }

      &::-moz-placeholder { /* Mozilla Firefox 19+ */
        color: #ccc;
      }

      &:-ms-input-placeholder { /* Internet Explorer 10-11 */
        color: #ccc;
      }
    }
  }
</style>
